<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div>
                    <el-input clearable v-model="find_data.expertName" style="width: 240px" placeholder="专家名称" />
                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                </div>
                <!-- 功能按钮 -->
                <div class="del_btn_Css">
                    <el-button @click="add_btn" type="primary" icon="CirclePlusFilled">新增</el-button>
                    <!-- <el-button @click="del_btn" type="danger" icon="DeleteFilled">删除</el-button>
                    <el-button @click="out_btn" type="warning" icon="Promotion">导出</el-button> -->
                </div>
            </template>
            <div>
                <el-table class="list_data_Css" border @selection-change="selection_change_btn" height="63vh"
                    ref="multipleTableRef" :data="list_data">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="编号" width="55" fixed type="index" />
                   <template v-if='role_off'>
                    <template v-for="item in table_data_list" :key="item.name">
                        <el-table-column v-if="item.enablePinning" :width="item.minWidth" :prop="item.name"
                            :label="item.displayName">
                            <template v-if="item.name == 'time'" #="{ row, column, $index }">
                                {{ row.startTime + '-' + row.endTime }}
                            </template> 
                            <template v-if="item.name == 'set' " #="{ row, column, $index }">
                                <el-button @click="up_btn(row)" type="warning" icon="QuestionFilled">编辑</el-button>
                                <el-button @click="del_btn(row)" type="danger" icon="RemoveFilled">删除</el-button>
                            </template>
                        </el-table-column>
                    </template>
                   </template>
                   <template v-if='!role_off'>
                    <template v-for="item in table_data_list2" :key="item.name">
                        <el-table-column v-if="item.enablePinning" :width="item.minWidth" :prop="item.name"
                            :label="item.displayName">
                            <template v-if="item.name == 'time'" #="{ row, column, $index }">
                                {{ row.startTime + '-' + row.endTime }}
                            </template> 
                            <template v-if="item.name == 'set' " #="{ row, column, $index }">
                                <el-button @click="up_btn(row)" type="warning" icon="QuestionFilled">编辑</el-button>
                                <el-button @click="del_btn(row)" type="danger" icon="RemoveFilled">删除</el-button>
                            </template>
                        </el-table-column>
                    </template>
                   </template>
                </el-table>

            </div>
            <div class="current_change_btn_css">
                <el-pagination @current-change="current_change_btn" @size-change="size_change_btn"
                    v-model:current-page="find_data.pageNo" v-model:page-size="find_data.pageSize"
                    :page-sizes="[20, 50, 100, 200, 500]" :background="true"
                    layout="prev, pager, next, jumper,->,sizes,total," :total="total" />
            </div>
        </el-card>
    </div>

    <!-- 弹窗 -->
    <div>
        <!-- 新增 -->
        <el-dialog style="margin-top:5vh" v-model="add_off" :title="title" width="50%" :close-on-click-modal='false'>
            <el-form label-width="120px" ref="ruleFormRef" label-suffix="：">
                <el-form-item label="专家名称" required>
                    <el-input v-model="add_data.expertName" maxlength="20" placeholder="请输入专家名称(最大长度为20位)"
                        show-word-limit type="text" />
                </el-form-item>
                <el-form-item label="从事行业" required>
                    <el-input v-model="add_data.expertType" maxlength="40" placeholder="请输入从事行业(最大长度为40位)"
                        show-word-limit type="text" />
                </el-form-item>
                <el-form-item label="开始时间" required>
                    <el-input v-model="add_data.startTime" placeholder="请输入从开始时间，例( 09:00 )" type="text" />
                </el-form-item>
                <el-form-item label="结束时间" required>
                    <el-input v-model="add_data.endTime" placeholder="请输入从结束时间，例( 18:00 )" type="text" />
                </el-form-item>
                <el-form-item label="联系电话" required>
                    <el-input v-model="add_data.phone" maxlength="11" placeholder="请输入联系电话(最大长度为11位)" show-word-limit
                        type="number" />
                </el-form-item>
                <el-form-item label="备注" required>
                    <el-input :autosize="{ minRows: 4, maxRows: 8 }" v-model="add_data.remark" maxlength="150"
                        placeholder="请输入备注(最大长度为150位)" show-word-limit type="textarea" />
                </el-form-item>

            </el-form>
            <div style="display:flex;margin-left:40vw">
                <el-button type="warning" @click="add_no()">取 消</el-button>
                <el-button type="primary" @click="add_ok()">确 定</el-button>

            </div>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick, shallowRef } from 'vue'
import {
    getExpertArchiveListByPage, saveExpertArchive,updateExpertArchive,deleteExpertArchive
} from '@/api/expert_countermeasures.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import CircularJSON from 'circular-json'
import { ImageUrl_upload } from '@/utils/common.js'
import { GET_TOKEN } from '@/utils/token.js'
onMounted(async () => {
    let expert_archives = JSON.parse(localStorage.getItem('expert_archives'))
    if (expert_archives) {
        find_data.expertName = expert_archives.expertName

        await list_api()
    await role_api()
    } else {
        await list_api()
    await role_api()
    }
   
})

//#region 登录角色判断 
//   
let role_off = ref(true)
let role_id = ref('')
let role_customerId = ref('')
const role_api = () =>{
    let luser = JSON.parse(localStorage.getItem('luser'))
    if (luser.loginName != 'admin') {
        role_off.value = false
        role_id.value = luser.id
        role_customerId.value = luser.customerId
        checkPointIds.value = []
        checkPointIds.value.push(role_customerId.value)
        getCustomerList_list.value = []
        getCustomerList_list.value.push(role_customerId.value)
    }
}
// #endregion


//#region 分页列表
const list_data = ref([])
const find_data = reactive({
    pageNo: 1,
    pageSize: 20,
    expertName: '',

})
const total = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    find_data.pageNo = 1
    list_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    list_api()
}

const list_api = () => {
    const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
    getExpertArchiveListByPage(find_data).then(res => {

        if (res.resultStatus.resultCode == '0000') {
            list_data.value = res.value.list
            total.value = res.value.total
        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }
    loading.close()


    })
}
//#endregion

//#region 表格数据处理
const table_data_list = reactive([
    { name: 'expertName', displayName: '专家名称', minWidth: '', enablePinning: true },
    { name: 'expertType', displayName: '从事行业', minWidth: '', enablePinning: true },
    { name: 'time', displayName: '服务时间', minWidth: '', enablePinning: true },
    { name: 'phone', displayName: '联系电话', minWidth: '', enablePinning: true },
    { name: 'set', displayName: '操作', minWidth: '200', enablePinning: true },
])

const table_data_list2 = reactive([
    { name: 'expertName', displayName: '专家名称', minWidth: '', enablePinning: true },
    { name: 'expertType', displayName: '从事行业', minWidth: '', enablePinning: true },
    { name: 'time', displayName: '服务时间', minWidth: '', enablePinning: true },
    { name: 'phone', displayName: '联系电话', minWidth: '', enablePinning: true },
])


//#endregion

//#region 表格选择
const table_list = ref([])
const selection_change_btn = (e) => {
    table_list.value = e
    console.log(e)
}
//#endregion

//#region 新增
const action = ref('http://120.78.240.202:8088/exSu/saveExpertSuggest')
const add_off = ref(false)
const add_data = reactive({
    expertName: '',
    expertType: '',
    phone: '',
    startTime: '',
    endTime: '',
    remark: '',
})
const add_btn = () => {
    add_data.title = ''
    add_data.fileName = '点击上传文件'
    up_data.value.fileName = ''
    title.value = '新增专家档案:'
    add_data.context = ''
    add_data.style = ''
    action.value = 'http://120.78.240.202:8088/exSu/saveExpertSuggest'
    up_off.value = false
    add_off.value = true

}
const uploadRef = ref('')
const rawFile_list = ref([])
const beforeAvatarUpload = (rawFile) => {
    console.log(rawFile)
    add_data.fileName = rawFile.name
    rawFile_list.value = []
    rawFile_list.value.push(rawFile)
    return true

}
const handleAvatarSuccess = (response, uploadFile) => {
    list_api()
    add_off.value = false
}
const add_ok = () => {
    if (!add_data.expertName) {
        return ElMessage({
            message: '请填写专家名称',
            type: 'warning',
        })
    } else if (!add_data.expertType) {
        return ElMessage({
            message: '请填写从事行业',
            type: 'warning',
        })
    } else if (!add_data.startTime) {
        return ElMessage({
            message: '请填写开始时间',
            type: 'warning',
        })
    } else if (!add_data.endTime) {
        return ElMessage({
            message: '请填写结束时间',
            type: 'warning',
        })
    } else if (!add_data.phone) {
        return ElMessage({
            message: '请填写联系电话',
            type: 'warning',
        })
    }
    if (add_data.startTime || add_data.endTime) {
        let timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;

        if (!timeRegex.test(add_data.startTime)) {
            return ElMessage({
                message: '开始时间格式不对',
                type: 'warning',
            })
        }
        if (!timeRegex.test(add_data.endTime)) {
            return ElMessage({
                message: '结束时间格式不对',
                type: 'warning',
            })
        }

    }





    if (up_off.value) {
        updateExpertArchive(add_data).then(res => {
            if (res.resultStatus.resultCode == '0000') {
                list_api()
                add_off.value = false
            } else {
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'warning',
                })
            }
        })
    } else {
        saveExpertArchive(add_data).then(res => {
            if (res.resultStatus.resultCode == '0000') {
                list_api()
                add_off.value = false
            } else {
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'warning',
                })
            }
        })
    }



}

const add_no = () => {
    add_off.value = false
}


//#endregion
const title = ref('新增专家建议:')
const up_off = ref(false)
const up_data = ref({})
//#region 修改
const up_btn = (e) => {
    add_data.endTime = e.endTime
    add_data.expertName = e.expertName
    add_data.expertType = e.expertType
    add_data.phone = e.phone
    add_data.remark = e.remark
    add_data.startTime = e.startTime
    add_data.id = e.id
    up_data.value = e
    title.value = '修改专家档案:'
    up_off.value = true
    add_off.value = true

}

//#endregion


//#region 删除
const del_btn = (e) => {

    console.log(e)
    ElMessageBox.confirm(
        '是否确认删除该档案?',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            let ps = [e.id]
            deleteExpertArchive(ps).then(res => {
                if (res.resultStatus.resultCode == '0000') {
                    list_api()
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {


        })

}
//#endregion

//#region 搜索
const search_btn = () => {
    // localStorage.setItem('expert_archives', CircularJSON.stringify(find_data))
    list_api()

}
//#endregion

</script>

<style scoped lang='scss'>
.up_css {
    cursor: pointer !important;
    width: 100%;
    background: #271e1e2b;
    border-radius: 5px;
}

.del_btn_Css {
    margin-top: 10px;
}

.list_data_Css {
    width: 100%
}

.current_change_btn_css {
    margin-top: 20px
}




.map_input {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;

}

.div_bg:hover {
    background-color: darkgray;
}
</style>
<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}
</style>
